<div style="POSITION: relative" id="content">
  <h3> 使用easyUI创建一个CRUD的应用</h3>
  <div id="article_content" class="article_content">
    <p>crud成为普遍的应用去搜集数据和正常的管理.CRUD允许我们生成页面列表和编辑数据库数据,这个教程将告诉你如何实现CRUD&nbsp;<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">DataGrid 使用easyUI框架.</span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">我们将要使用以下插件:</span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></p>
    <ul style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
      <li>datagrid: 显示用户列表数据.</li>
      <li>dialog: 创建或者编辑单个用户信息.</li>
      <li>form: 使用form提交数据.</li>
      <li>messager: 显示一些操作信息.</li>
    </ul>
    <p></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 第一步: 准备好数据库</h4>
    <p>我们将使用mysql存储用户信息,创建数据库和'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">users</span>'表.</p>
    <p><img src="documentation/images/1344331636_2644.png" alt=""><br>
    </p>
    <p></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 第二步:创建DataGrid显示用户信息</h4>
    创建<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">DataGrid 没有javascript代码:</span>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></p>
    <pre name="code" class="html">&lt;table id=&quot;dg&quot; title=&quot;My Users&quot; class=&quot;easyui-datagrid&quot; style=&quot;width:550px;height:250px&quot;  
        url=&quot;get_users.php&quot;  
        toolbar=&quot;#toolbar&quot;  
        rownumbers=&quot;true&quot; fitColumns=&quot;true&quot; singleSelect=&quot;true&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;firstname&quot; width=&quot;50&quot;&gt;First Name&lt;/th&gt;  
            &lt;th field=&quot;lastname&quot; width=&quot;50&quot;&gt;Last Name&lt;/th&gt;  
            &lt;th field=&quot;phone&quot; width=&quot;50&quot;&gt;Phone&lt;/th&gt;  
            &lt;th field=&quot;email&quot; width=&quot;50&quot;&gt;Email&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  
&lt;div id=&quot;toolbar&quot;&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-add&quot; plain=&quot;true&quot; onclick=&quot;newUser()&quot;&gt;New User&lt;/a&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-edit&quot; plain=&quot;true&quot; onclick=&quot;editUser()&quot;&gt;Edit User&lt;/a&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-remove&quot; plain=&quot;true&quot; onclick=&quot;removeUser()&quot;&gt;Remove User&lt;/a&gt;  
&lt;/div&gt;  </pre>
    我们不需要写任何的<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">javascript 代码,我们显示用户列表如以下图片:</span>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344331810_9197.png" alt=""><br>
      </span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">使用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">DataGrid 的url属性,委派给'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">get_users.php</span>'从服务器检索数据:</span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">get_users.php代码文件:</span><br>
      </span></span></p>
    <pre name="code" class="php">$rs = mysql_query('select * from users');  
$result = array();  
while($row = mysql_fetch_object($rs)){  
    array_push($result, $row);  
}  
  
echo json_encode($result);  </pre>
    <p></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 第三步: 创建 form对话框</h4>
    我们使用相同的对话框,创建或者编辑一个用户:
    <pre name="code" class="html">&lt;div id=&quot;dlg&quot; class=&quot;easyui-dialog&quot; style=&quot;width:400px;height:280px;padding:10px 20px&quot;  
        closed=&quot;true&quot; buttons=&quot;#dlg-buttons&quot;&gt;  
    &lt;div class=&quot;ftitle&quot;&gt;User Information&lt;/div&gt;  
    &lt;form id=&quot;fm&quot; method=&quot;post&quot;&gt;  
        &lt;div class=&quot;fitem&quot;&gt;  
            &lt;label&gt;First Name:&lt;/label&gt;  
            &lt;input name=&quot;firstname&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot;&gt;  
        &lt;/div&gt;  
        &lt;div class=&quot;fitem&quot;&gt;  
            &lt;label&gt;Last Name:&lt;/label&gt;  
            &lt;input name=&quot;lastname&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot;&gt;  
        &lt;/div&gt;  
        &lt;div class=&quot;fitem&quot;&gt;  
            &lt;label&gt;Phone:&lt;/label&gt;  
            &lt;input name=&quot;phone&quot;&gt;  
        &lt;/div&gt;  
        &lt;div class=&quot;fitem&quot;&gt;  
            &lt;label&gt;Email:&lt;/label&gt;  
            &lt;input name=&quot;email&quot; class=&quot;easyui-validatebox&quot; validType=&quot;email&quot;&gt;  
        &lt;/div&gt;  
    &lt;/form&gt;  
&lt;/div&gt;  
&lt;div id=&quot;dlg-buttons&quot;&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-ok&quot; onclick=&quot;saveUser()&quot;&gt;Save&lt;/a&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-cancel&quot; onclick=&quot;javascript:$('#dlg').dialog('close')&quot;&gt;Cancel&lt;/a&gt;  
&lt;/div&gt;  </pre>
    这个对话框已经创建也没有任何的javascript代码:
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344332045_6480.png" alt=""><br>
      <br>
      <br>
      </span></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 第四步:实现创建和编辑用户</h4>
    当创建一个用户,我们打开一个对话框和清理form数据
    <p></p>
    <p><span style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span></span></p>
    <pre name="code" class="javascript">function newUser(){  
    $('#dlg').dialog('open').dialog('setTitle','New User');  
    $('#fm').form('clear');  
    url = 'save_user.php';  
}  </pre>
    当编辑一个用户,我们打开一个对话框加载form数据从<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid选择的行</span>
    <p></p>
    <p><span style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span></span></p>
    <pre name="code" class="javascript">var row = $('#dg').datagrid('getSelected');  
if (row){  
    $('#dlg').dialog('open').dialog('setTitle','Edit User');  
    $('#fm').form('load',row);  
    url = 'update_user.php?id='+row.id;  
}  </pre>
    <span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">'url'存储着URL表单提交地址,当保存用户数据时</span>
    <p></p>
    <p><span style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 第五步: 保存用户数据</h4>
    我们使用以下代码保存用户数据
    <p></p>
    <p><span style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span></span></p>
    <pre name="code" class="javascript">function saveUser(){  
    $('#fm').form('submit',{  
        url: url,  
        onSubmit: function(){  
            return $(this).form('validate');  
        },  
        success: function(result){  
            var result = eval('('+result+')');  
            if (result.success){  
                $('#dlg').dialog('close');      // close the dialog  
                $('#dg').datagrid('reload');    // reload the user data  
            } else {  
                $.messager.show({  
                    title: 'Error',  
                    msg: result.msg  
                });  
            }  
        }  
    });  
} </pre>
    <p>提交form之前,'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">onSubmit</span>'函数将被调用,在那里我们可以验证form字段&#20540;当form字段&#20540;提交成功,关闭对话框和重新加载datagrid数据;</p>
    <p></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 第6步:删除一个用户</h4>
    我们使用以下代码,移除一个用户.
    <p></p>
    <p></p>
    <pre name="code" class="javascript">function removeUser(){  
    var row = $('#dg').datagrid('getSelected');  
    if (row){  
        $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){  
            if (r){  
                $.post('remove_user.php',{id:row.id},function(result){  
                    if (result.success){  
                        $('#dg').datagrid('reload');    // reload the user data  
                    } else {  
                        $.messager.show({   // show error message  
                            title: 'Error',  
                            msg: result.msg  
                        });  
                    }  
                },'json');  
            }  
        });  
    }  
}  </pre>
    <img src="documentation/images/1344391376_8772.png" alt="">
    <p></p>
    <p>移除一行之前,我们将显示一个确认confirm对话框让用户决定是否真的移除该行数据,当删除数据成功之后,调用'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">reload</span>'方法刷新<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid
      数据</span></p>
    <p></p>
    <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span>
      <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 第7步: 运行代码</h4>
      在浏览器运行你的代码和开启MySQL .</div>
   <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载EasyUI示例代码:</h4>
    <a href="http://www.jeasyui.com/tutorial/app/crud/downloads/easyui-crud-demo.zip" target="_blank">easyui_crud_demo.zip</a><br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>